import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { AtTag } from "taro-ui";
import { fromNowOn } from "../../utils/util";
import "./index.scss";

class Article extends Taro.Component {

  navigate = (sid) => {
    Taro.navigateTo({
      url: `../detail/index?id=${sid}`
    });
	}
	
  render() {
    const { article = {} } = this.props;
    const isTag = article.tags && article.tags.length > 0;
    return (
      <View
        className="at-article art-item"
        onClick={this.navigate.bind(this, article.id)}>
        {/* 纯文本样式 */}
        {article.type === 1 && (
          <View>
            <View className="at-article__h2 art-title">{article.title}</View>
            <View className="at-article__info art-footer mt5">
              {isTag && (
                <AtTag className="art-tag" size="small" active={true}>
                  {article.tags[0]}
                </AtTag>
              )}
              <Text className={isTag ? "ml10" : ""}>{article.author}</Text>
              <Text className="ml10">{fromNowOn(article.published)}</Text>
            </View>
          </View>
        )}

        {/* 图文类型 */}
        {article.type === 2 && (
          <View className="art-image-wrap">
            <View className="art-text-area">
              <View className="at-article__h2 art-title">{article.title}</View>
              <View className="at-article__info art-footer mt5">
                {isTag && (
                  <AtTag className="art-tag" size="small" active={true}>
                    {article.tags[0]}
                  </AtTag>
                )}
                <Text className={isTag ? "ml10" : ""}>{article.author}</Text>
                <Text className="ml10">{fromNowOn(article.published)}</Text>
              </View>
            </View>
            <Image className="art-image" src={article.images[0]} />
          </View>
        )}

        <View className="art-deviver"></View>
      </View>
    );
  }

  static options = {
    addGlobalClass: true
  };
}

export default Article;
